<template>
	<view>
		<view class="item">
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="违章信息" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text
					style="line-height: 80rpx; color: #FFC000;">{{illegalDetailBean.illegal.processingStatusShow}}</text>
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line">
				<text class="text-name">车辆订单号:</text>
				<text class="text-value">{{illegalDetailBean.illegal.orderCarNo|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车辆订单状态:</text>
				<text class="text-value">{{(illegalDetailBean.illegal.carStatusShow|filterNull)+"/km"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">租赁类型:</text>
				<text class="text-value">{{(illegalDetailBean.illegal.rentTypeShow|filterNull)+"/km"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{illegalDetailBean.illegal.customerName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">联系电话:</text>
				<text class="text-value">{{illegalDetailBean.illegal.customerTel|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">租赁开始时间:</text>
				<text class="text-value">{{illegalDetailBean.illegal.timeStartRent|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">租赁结束时间:</text>
				<text class="text-value">{{illegalDetailBean.illegal.timeFinishRent|filterNull}}</text>
			</view>

			<u-line color="#efefef" border-style="dashed" :customStyle="{'margin-bottom': '20rpx','display': 'block',}">
			</u-line>

			<view class="text-line">
				<text class="text-name">违章地点:</text>
				<text class="text-value">
					{{illegalDetailBean.illegal.illegalLocation|filterNull}}
				</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章扣分:</text>
				<text class="text-value">{{(illegalDetailBean.illegal.pointsDeduction|filterNull)+"分"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章罚款:</text>
				<text class="text-value">{{(illegalDetailBean.illegal.illegalFines|filterNull)+"元"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章时间:</text>
				<text class="text-value">{{illegalDetailBean.illegal.illegalTime|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章内容:</text>
				<text class="text-value">{{illegalDetailBean.illegal.illegalTypeShow|filterNull}}</text>
			</view>

			<view v-if="type==1">

				<view class="text-line">
					<text class="text-name">违章处理备注:</text>
				</view>

				<textarea type="text" value="" placeholder="请描述违章处理情况" class="remark" />
			</view>

		</view>

		<view class="item" v-if="illegalRecord222.length > 0">
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="clock" color="#1573FF" label="处理记录" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>

			</view>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="process-item" v-for="(item, index) in illegalRecord222" :key="item">
				<view class="process-left">
					<image src="../../static/remind/point_yellow.png" mode="widthFix"></image>
					<u-line color="#FFC000" direction="col" border-style="dashed" :customStyle="{'width': '2rpx','height': '75%',}">
					</u-line>
				</view>
				<view class="process-right">
					<text style="color: #A7A7A7;">{{item.handleTime|filterNull}}</text>
					<text>{{item.handleContent|filterNull}}</text>
				</view>

			</view>

		</view>

		<view style="height: 118rpx;"></view>

		<view class="button-container" v-if="type==1">
			<button class="btn-item" @click="commit">提 交</button>
		</view>
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				type: 0,
				orderCarNo: '',
				illegalId: '',
				illegalRecord222: [{
					handleTime: "123123",
					handleContent: "内容"
				}, {
					handleTime: "1231232321231232323123123232312312修界面要增加维修反馈时填写32323123123232312312323231231232323123123232312312323233",
					handleContent: "内容232323对方个人更为广泛豆腐干的，新增维修界面要增加维修反馈时填写的字段，所以增加字approveStatusRemark：有则显示，无则不显示 举例：待xxx审核"
				}],
				illegalDetailBean: {
					illegal: {},
					illegalRecord: []
				},
			}
		},
		methods: {

		},

		onLoad(op) {
			this.type = op.type;
			this.orderCarNo = op.orderCarNo;
			this.illegalId = op.illegalId;

			this.$u.api.illegalRecordDetail({
				illegalId: op.illegalId,
				orderCarNo: op.orderCarNo,
			}).then(
				res => {
					this.illegalDetailBean = res;
				}

			);
		}
	}
</script>

<style lang="scss">
	page {
		// width: 750rpx;
		height: 100%;
	}

	.remark {
		display: block;
		margin: 20rpx;
		min-height: 130rpx;
		border: solid $grayce 2rpx;
		border-radius: 8rpx;
		background-color: $grayf5;
		padding: 10rpx;
		font-size: 24rpx;
		color: $black33;
		word-break: break-all;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}

	.process-item {
		display: flex;
		padding: 0 20rpx;


		.process-left {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
			}

		}

		.process-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text {
				word-break: break-all;//断行
				white-space: normal;
				margin: 0 0 10rpx 10rpx;
			}
		}
	}
</style>
